<template>
    <div class="company-user-list">
        <el-divider></el-divider>
        <el-descriptions title="媒体报备"></el-descriptions>
        <ul class="global-operation-list" style="margin: 0 20px;">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">媒体名称：</h2>
                        <el-input placeholder="媒体名称" v-model="searchForm.mediumName" style="width: 250px"
                            clearable></el-input>
                    </li>
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">状态：</h2>
                        <el-select v-model="searchForm.status" clearable filterable>
                            <el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </li>
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">失效状态：</h2>
                        <el-select v-model="searchForm.expiredType" clearable filterable>
                            <el-option v-for="(item, index) in expiredTypeList" :key="index" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </li>
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">审核时间：</h2>
                        <el-date-picker v-model="searchForm.auditTime" type="datetimerange"
                            :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" @click="rePosts">搜索</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button class="global-filter-item-search" @click="restart">重置</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button class="global-filter-item-search" @click="handleAddIntendedMedia">添加</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
            <div class="global-table-content-a">
                <el-table :data="dataList" style="width: 100%" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '3px' }" max-height="620" border v-loading="tableLoading">
                    <el-table-column prop="id" label="编号" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="mediumName" label="媒体名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="showRemark" label="备注" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="statusValue" label="状态" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="auditDate" label="审核时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="auditReason" label="审核理由" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="auditPerson" label="审核人" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="expiredTypeValue" label="失效状态" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="expiredDate" label="失效时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div class="global-page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" background
                        layout="sizes, total, prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog title="选择报备媒体" :visible.sync="intendedMediaDialogVisible" width="55%">
            <div>
                <div style="display: flex;align-items: center;">
                    <div>
                        项目：
                    </div>
                    <div>
                        <el-input v-model="intendedMediaChooseProjectName"></el-input> 
                    </div>
                </div>
                <div style="display: flex;padding-top: 20px;align-items: center;">
                    <div>
                        投放品牌：
                    </div>
                    <div>
                        <el-input v-model="intendedMediaChoosebrands"></el-input> 
                    </div>
                </div>
                <div style="padding-top: 20px; display: flex;align-items: center;">
                    <div>
                        媒体：
                    </div>
                    <div>
                        <el-cascader :options="mediumOfflineCascaderList" :props="mediumOfflineCascaderProps"
                            collapse-tags clearable v-model="intendedMediaChooseList" filterable></el-cascader>
                    </div>
                </div>
                <div style="padding-top: 20px; display: flex;align-items: center;">
                    <div>
                        报备图片：
                    </div>
                    <div>
                        <el-upload class="avatar-uploader" action="/checkorder/manager/pc/user/uploadFile" drag
                            :show-file-list="false" :data="{ token: $store.state.token }"
                            :on-success="(response, file, fileList) => handleAvatarSuccessUpdateBrandPlacementPic(response)">
                            <img v-if="intendedMediaChooseProjectPic" :src="intendedMediaChooseProjectPic"
                                class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"
                                style="height: 100px;width: 100px;line-height: 100px !important"></i>
                            <div slot="tip" class="el-upload__tip" style="color: #919baf; display: flex">
                                <div>
                                    只能上传jpg/png文件，示例图（点击图片可以放大查看）：
                                </div>
                                <el-image style="width: 100px; height: 100px" :src="reportMediumCaseDiagramPic"
                                    fit="fill" :preview-src-list="[reportMediumCaseDiagramPic]"></el-image>
                            </div>

                        </el-upload>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCloseIntendedMediaDialog">取 消</el-button>
                <el-button type="primary" @click="doSubmitIntendedMedia">提 交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { renderAsync } from 'docx-preview';
import APIProject from "@/api/apiProject";
import APIMedium from "@/api/apiMedium";
import APIAdmin from "@/api/apiCompanyUser";
import APISysLabel from "@/api/apiSysLabel";
import ProjectPackage from "@/components/ProjectPackage";
import APIBusinessAccount from "@/api/apiBusinessAccount";
import APIProjectIntendedMedia from "@/api/apiProjectIntendedMedia";
import APIDetail from "@/api/apidetail";
export default {
    name: "ProjectReport",
    components: {},
    props: {
        parentInfoobj:Object,
        currentStageid:Number
    },
    data() {
        return {
            intendedMediaDialogVisible: false,
            intendedMediaChooseProjectName: '',
            intendedMediaChoosebrands:'',
            mediumOfflineCascaderList: [],
            mediumOfflineCascaderProps: { multiple: true },
            intendedMediaChooseList: [],
            intendedMediaChooseProjectPic: '',
            reportMediumCaseDiagramPic: 'https://checkorder-view.mejour.cn/pic/reportMediumCaseDiagram.png',
            // 表格相关
            tableLoading: true,
            dataList: [],
            pageSize: 15,
            pageNum: 1,
            total: 0,
            pageSizes: [10,,15, 20, 50],
            tokenData: {
                token: "",
            },
            searchForm: {
                mediumName: null,
                status: null,
                expiredType: null,
                auditTime: null,
            },
            userInfo: {},
            projectId: null,
            statusList: [
                {
                    label: "未审核",
                    value: 1,
                },
                {
                    label: "已通过",
                    value: 2,
                },
                {
                    label: "已驳回",
                    value: 3,
                },
            ],
            expiredTypeList: [
                {
                    label: "未失效",
                    value: 1,
                },
                {
                    label: "已失效",
                    value: 2,
                },
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        };
    },
    created() {
        // let item = JSON.parse(localStorage.getItem("viewProject"))
        // this.projectId = item.projectId
        let projectId = this.$ls.get("projectId");
        this.projectId = projectId;
        this.tokenData.token = this.$store.state.token;
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
        this.searchForm = {
            mediumName: null,
            status: null,
            expiredType: null,
            auditTime: null,
        }
        this.getPost()
    },
    methods: {
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        formatterDate(time) {
            return this.$moment(time).format("YYYY-MM-DD");
        },
        handleAddIntendedMedia(){
            console.log(this.parentInfoobj,123)
            this.intendedMediaChooseProjectName = this.parentInfoobj.name;
            this.intendedMediaChoosebrands = this.parentInfoobj.brands;
            this.getMediumOfflineCascaderList();
            this.intendedMediaDialogVisible = true;
        },
        handleCloseIntendedMediaDialog(){
            this.intendedMediaDialogVisible = false
        },
        doSubmitIntendedMedia(){
            console.log(this.intendedMediaChooseList)
            if (!this.intendedMediaChooseList || this.intendedMediaChooseList.length == 0){
                this.$message({
                    message: '请选择报备媒体',
                    type: 'error'
                });
                return
            }
            let mediumList = []
            this.intendedMediaChooseList.forEach(item => {
                mediumList.push(item[1])
            })
            let params = {
                projectId: this.parentInfoobj.id,
                mediumIds: mediumList.join(","),
                projectName: this.intendedMediaChooseProjectName,
                pic: this.intendedMediaChooseProjectPic,
                brands:this.intendedMediaChoosebrands
            }
            APIProjectIntendedMedia.doAddIntendedMedia(params).then((res) => {
                if (res.key === 1000) {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    this.getPost()
                    this.intendedMediaDialogVisible = false
                }
            });
        },
        getMediumOfflineCascaderList() {
            const params = {
                token: this.$store.state.token,
                 stageId:this.currentStageid
            };
            APIMedium.getMediumOfflineCascader(params).then((res) => {
                if (res.key === 1000) {
                    var list = res.result.list;
                    list.forEach(item => {
                        item.disabled = false
                    })
                    let noObj = [
                        {
                            label: '无需报备',
                            value: -1,
                            disabled: false,
                            children: [
                                {
                                    label: '无需报备',
                                    value: -1,
                                }
                            ]
                        }
                    ]
                    this.mediumOfflineCascaderList = [...noObj,...list];
                }
            });
        },
        handleAvatarSuccessUpdateBrandPlacementPic: function (e) {
            if (e.key == 1000) {
                this.intendedMediaChooseProjectPic = e.result.data;
                this.$message.success({
                    showClose: true,
                    message: "上传成功",
                    duration: 1500
                });
            }
        },
        // 重置
        restart() {
            // 搜索条件重置
            this.searchForm = {
                mediumName: null,
                status: null,
                expiredType: null,
                auditTime: null,
            };
            this.rePosts();
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
        },
        // 表格列表
        getPost() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                projectId: this.projectId,
                 stageId:this.currentStageid
            };
            if (this.searchForm.mediumName) {
                params.mediumName = this.searchForm.mediumName
            }
            if (this.searchForm.status) {
                params.status = this.searchForm.status
            }
            if (this.searchForm.expiredType) {
                params.expiredType = this.searchForm.expiredType
            }
            if (this.searchForm.auditTime && this.searchForm.auditTime.length == 2) {
                params.auditStartTime = new Date(this.searchForm.auditTime[0]).getTime()
                params.auditEndTime = new Date(this.searchForm.auditTime[1]).getTime()
            }
            APIProjectIntendedMedia.getProjectIntendedMediaList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.total = res.count;
                    res.list.forEach(item => {
                        if (item.createTime) {
                            item.createDate = this.formatterTime(item.createTime)
                        }
                        if (item.status){
                            item.statusValue = item.status == 1 ? '待审核' : 
                                item.status == 2 ? "已通过" : 
                                item.status == 3 ? "已驳回" : "未知"
                        }
                        if (item.auditTime) {
                            item.auditDate = this.formatterTime(item.auditTime)
                        }
                        if (item.expiredTime) {
                            item.expiredDate = this.formatterDate(item.expiredTime)
                        }
                        if (item.expiredType){
                            item.expiredTypeValue = item.expiredType == 1 ? "未失效" : 
                                item.expiredType == 2 ? "已失效" : "未知"
                        }
                    })
                    this.dataList = res.list;
                    this.tableLoading = false;
                }
            });
        },


    },
};
</script>

<style lang="sass">
</style>
<style lang="sass" scoped>

.global-operation-list
  padding-left: 0
.global-select .global-select-btn
  background: #FFFFFF
.global-table-content
  padding: 0
  background-color: white
  width: 100%
.global-table-content-a
  margin: 0 auto
  width: 90%
  padding: 20px 0
.company-user-list
  .global-operation-left
    margin-right: 0
</style>
